<template>
  <div class="right-top-item-wrap">
    <Card class="list" :bordered="false">
      <div slot="title">用气模式{{num}}</div>
      <a href="javascript:;" title="关闭" slot="extra" @click="handleClick(index)">
        <Icon type="ios-close-circle-outline" />
      </a>
      <div class="item">
        <Row>
          <i-col span="8"><span class="name">平均值</span></i-col>
          <i-col span="16"><span class="text">{{avg}}</span></i-col>
        </Row>
        <Row>
          <i-col span="8"><span class="name">波动</span></i-col>
          <i-col span="16"><span class="text">{{standard}}</span></i-col>
        </Row>
      </div>
    </Card>
  </div>
</template>
<script>
export default {
  name: 'tables-day-right-top-item',
  props: {
    content: {
      type: Object
    },
    index: {
      type: Number,
      default: 0
    }
  },
  computed: {
    num() {
      return parseInt(this.index) + 1
    },
    avg() {
      return this.content ? this.content.avg : '暂无'
    },
    standard() {
      return this.content.standard ? this.content.standard : '暂无'
    }
  },
  methods: {
    handleClick(index) {
      this.$emit('deleteItem', index)
    }
  }
}
</script>
<style lang="less" scoped>
.right-top-item-wrap {
  .name,
  .text {
    font-size: 12px;
  }

  .item {
    padding: 0 10px;
  }

  .list {
    margin-bottom: 5px;
  }
}
</style>
